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CSS  Already? 

• Back  in  the  ancient  days  (i.e.  before  2007)  we  got  used  to  thining  that 
CSS  was  “advanced  HTML’’  and  that  it  was  “difficult’’ 

• With  modern  browsers,  we  should  never  bother  with  the  old  ways  to 
change  font,  color,  alignment,  etc  etc. 

• CSS  - Just  Do  It! 
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From  Simple  to 
Advanced  CSS 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 


with  no  changes 
to  the  HTML 


Separation  of  concerns  / specialization 


Developer 


Designer 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0 
Strict//EN"  "http://www.w3.org/TR/xhtml  I /DTD/xhtml  I - 
strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graph ical. css"/**/; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:  I px  solid 


Everyone  needs  to  know  some  HTML  and  some  CSS  and  some  programming  - but  to  be  truly 
skilled  at  a professional  level  requires  deep  understanding  and  specialization. 


The  big  picture... 


In  the  modern  era  of  web  design 
we  represent  content  and 
meaning  in  HTML  an  formatting 
and  layout  in  CSS. 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict// 
EN"  "http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 
<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graphical.css "1**1; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:  I px  solid  red;padding:. 

5em;margin:0  25%} 

a img{border:none} 

.hot  br,  .quick  br,  dl.feature2  img{display:none} 
div#main  label,  legend{font-weight:bold} 
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Help 


HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


CSS  Syntax 


• CSS  Syntax  is  very  different  than  HTML 

• CSS  is  a set  of  “rules”  which  in  include  a “selector”  and  one  or  more 
“properties”  and  “values”  as  well  as  some  punctuation... 


body  { 

font-family:  arial,  sans-serif; 

} 


Partial  List  of  CSS  Properties 


color 

background-color 
visibility  (visible/hidden) 
font-family  (arial,  sans-serif) 
font-size 

font-style  (italic,  normal) 
font-weight  (bold,  normal) 
text-align 
vertical-align 

text-transform  (lowercase,  etc) 


text- deco  rati  on 
border-width 
border- style 
border-color 
margin 
border 
padding 

float  (left,  right,  none) 
left  / top 

position  (static,  relative,  absolute) 
z-index 


http://lesliefranke.com/files/reference/csscheatsheet.html 


Anatomy  of  a CSS  Rule 


selector  - which  part  of  the 
document  does  this  rule  apply 
to  

body  { 

font-family:  arial,  sans-serif; 
font-size:  100%; 


y 

property  - which 
aspect  of  CSS  are 
we  changing 


\ 

value  - What  are  we 
setting  the  property  to. 


Applying  CSS  to  our  HTML 

• Inline  - right  on  an  HTML  tag  - using  the  style=  attribute 

• An  embedded  style  sheet  in  the  <head>  of  the  document 

• As  external  style  sheet  in  a separate  file 


<p>Google  AppEngine  is  scalable. </p> 

<p  style="color:  red;  font-weight:  bold;"> 
Don't  forget  it  is  free  (for  small  sites). </p> 
<p  style-'font-family: sans-serif; 

background-color:  green"> 

Google  AppEngine  is  easy  to  learn. </p> 


Inline 

Styles 


We  add  a style=  attribute  to 
a tag.  We  can  have  one  or 
more  properties  and  values. 
The  styling  applies  for  the 
scope  of  the  tag. 


Google  AppEngine  is  scalable. 

Don't  forget  it  is  free  (for  small  sites). 

Google  AppEngine  is  easy  to  learn. 


External  Style  Sheet 

• Preferred  because  it  allows  easy  switching  of  style  across  many  files. 

• On  larger  teams,  it  also  allows  separation  of  concerns  between  the 
developer  (HTML)  and  designer  (CSS) 


<head> 

<title>Learning  the  Google  App  Engine</title> 


<style  type="text/css"> 
body  { 

font-family:  arial,  sans-serif; 


} 

</style> 

</head> 

<body> 

<h  I ><a  href="index.htm"> 

AppEngineLearn</a></h  I > 


</body> 


The  selector  in  the  CSS  rule 
indicates  where  in  the 
displayed  content  is  to  be 
“styled”  according  to  the 
properties. 
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<head> 

<title>Learning  the  Google  App  Engine</title> 

< 1 i n k type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 

<body> 

csev  $ Is  -1 
total  32 

-rw-r—r— 

1 csev  staff 

44  Dec  19  06:06  glike.css 

-rw-r—r— 

1 csev  staff 

679  Dec  19  06:07  index.htm 

-rw-r—r— 

1 csev  staff 

883  Dec  19  05:59  sites.htm 

-rw-r—r— 

1 csev  staff 

679  Dec  19  05:59  topics.htm 

csev  $ 
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Google  App  Engine:  About 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appcnginelcam.com  useful. 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 

First:  Just  work  with  the  tags  and  fix  fonts  / colors 

<head> 

<title>Learning  the  Google  App  Engine</title> 

< I i n k type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 


<body> 

<h  I ><a  href="index.htm"> 

AppEngineLearn</a></h  I > 


<ul> 


<li><a  href="sites.htm">Sites</a></li> 


<li><a  href="topics.htm"  >Topics</a></li> 
</ul> 

<h  I >Google  App  Engine: About</h  I > 
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Welcome  to  the  site  dedicated  to  learning  the  Google 
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www.appengineleam.com  useful. 


Select  all  “a”  tags  in  the  document. 


a{ 

color:  blue; 

} 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<link  type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 


<body> 


body  { 

font-family:  arial,  sans-serif; 

} 

a{ 

color:  blue; 

} 

h I a { 

text-decoration:  none; 
color:  black; 

1 


O O ^ Learning  the  Google  AppEngine 

< | ► 6 ■ file:///Users/csev/Desktop/teach/a  •(C^  Google  'i  » 


AppEngineLearn 


Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 


<head> 

<title>Learning  the  Google  App  Engine</title> 
clink  type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 


<body> 

<h  I ><a  href="index.htm"> 

AppEngineLearn</a></h  I > 


cul> 


<li><a  href="sites.htm">Sites</a></li> 


<li><a  href="topics.htm"  >Topics</a></li> 
</ul> 

<h  I >Google  App  Engine: About</h  I > 
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Select  tags  where  “a”  is  inside  “h  I 


h I a { 

text-decoration:  none; 
color:  black; 

} 


Marking  Text  for  Styling 


• Sometimes  we  cannot  use  an  existing  tag  in  the  document  for  styling 
so  we  use  the  span  tag 

• Sometimes  we  want  to  apply  styling  to  *some*  but  all  of  the  “p”  tags 
using  the  class=  attribute 

• Sometimes  we  want  to  break  the  document  into  “chunks”  using  the 
id=  attribute 


Making  Some  Tags  Special 


• We  can  use  the  class=  to  mark 
tags  and  then  apply  styling 
specifically  to  those  tags. 

• We  style  these  sections  by 
writing  a rule  which  starts 
with  a period  followed  by  the 
name  of  the  class 


<head> 

<style  type="text/css"> 

.abc  { 

color:  blue; 

} 

</style> 

</head> 

<body> 

<p  class="abc">First  paragraph</p> 
<p>Second  Paragraph</p> 

<p  class="abc">Third  paragraph</p> 
</body> 


The  “un-tag”  <span> 


<p>Google  AppEngine  is  scalable 
and  <span  style="color:  red">don't 
forget</span>  that  it  is  free 
for  small  sites  and  is  easy  to  learn. </p> 


Span  does  not  break  word  Google  AppEngine  is  scalable 

wrapping  - it  simply  allows  us  to  and  don’t  forget  that  it  is  free  for 

apply  styling  to  a segment  of  text  small  sites  and  is  easy  to  learn, 
within  a paragraph. 


Making  Some  Tags  Special 


First  paragraph 
Second  Paragraph 
Third  paragraph 


<head> 

<style  type="text/css"> 

.abc  { 

color:  blue; 

} 

</style> 

</head> 

<body> 

<p  class="abc">First  paragraph</p> 
<p>Second  Paragraph</p> 

<p  class="abc">Third  paragraph</p> 
</body> 


<body> 

Defining  and  Marking  Blocks 

<div  id="header"> 

<h  1 ><a  href="index.htm">AppEngineLearn</a></h  1 > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

• To  mark  out  the  scope  of  blocks,  we  use  the  id=  attribute  on  a tag. 

<li><a  href-'topics.htm"  >Topics</a></li> 
</ul> 

• We  also  have  a new  block  tag  called  <div>  that  we  often  couple  with 
the  id=  attribute  on  the  div  or  other  tag 

</div> 

<div  id="content"> 

<h2>Google  App  Engine: About</h2> 

• While  the  class=  attribute  can  be  (re)used  over  and  over  on  many  tags 

<P> 

in  a documents  particular  id=  value  can  only  be  used  once  in  a 

Welcome  to  the  site  dedicated  to 

document. 

learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

• id=  is  used  to  mark  a particular  block  in  the  document 

</p> 

</div> 

</body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

</div> 


To  apply  styling  rules  to  a 
block  of  text  identified  using 
id=  we  use  a # character 
befor  the  id  value. 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 


<body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

</div> 

<div  id="content"> 

<h2>Google  App  Engine: About</h2> 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</div> 

</body> 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a 

{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 

} 


Learning  the  Coogle  AppEngine 

C <&  file:// /Users /csev/ Desktop/teach/i  C j - s » 


AppEngineLearn 

• Sites 

• Topics 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appengineleam.com  useful 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a 

{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 

} 


Color  Names 


• W3C  has  listed  16  color  names 
that  will  validate  with  an  HTML 
validator. 

• The  color  names  are:  aqua,  black, 
blue,  fuchsia,  gray,  green,  lime, 
maroon,  navy,  olive,  purple,  red, 
silver,  teal,  white,  and  yellow. 


Color  Values 

HTML  colors  can  be  defined  as  a hexadecimal  notation  for  the  combination  of  Red, 
Green,  and  Blue  color  values  (RGB). 

The  lowest  value  that  can  be  given  to  one  light  source  is  0 (hex  #00)  and  the  highest 
value  is  255  (hex  #FF). 


The  table  below  shows  the  result  of  combining  Red,  Green,  and  Blue  light  sources:. 


The  color  names  are:  aqua,  black,  blue,  fuchsia,  gray,  green,  lime,  maroon,  navy, 
olive,  purple,  red,  silver,  teal,  white,  and  yellow. 


http://www.w3schools.com/html/html_colors.asp 


Don’t  Overuse 
Span/Div 

• Don’t  add  unnecessary  div 
tags  when  you  already 
have  a block  tag  to  add  a 
class  to 

• Don’t  invent  your  own 
spans  when  something 
exists  that  will  work 


<div  class=”important”> 

<P> 

This  is 

<span  class=”heavy”>a</span> 
paragraph. 

</p> 

</div> 


<p  class=”important”> 

This  is  <strong>a</strong> 
paragraph. 

</p> 


Colors... 


Three  Numbers, 
Red,  Green  , and 
Blue  - each  from  00 
- FF  (Hexidecimal) 


#ffffff  = white 
#000000  = black 
#ff0000  = red 
#00ff00  = green 
#0000ff  = blue 


#e2edff 


Color  Name 

Color  HEX 

Color 

AliceBlue 

#F0F8FF 

AntioueWhite 

#FAEBD7 

Aoua 

#00FFFF 

Aquamarine 

# 7FFFD4 

Azure 

# FOFFFF 

Beioe 

#F5F5DC 

Bisque 

#FFE4C4 

Black 

#000000 

BlanchedAlmond 

#FFEBCD 

Blue 

#0000FF 

BlueViolet 

Brown 

#BA2BE2 

*A52A2A 

http.7/wvs^w.w3schools.com/css/css_colornames.asp 


Colors 

am 

2 

h ; 

, u RGB  Sliders 

Red 

77 

Blue 

, 

Opacity 

_A  loo"  * 

l l l l l l l ill 


Web-safe 

colors 


Web-Smart  Colors 


• Web-smart  colors  are  4096  colors  which 
should  easily  display  accurately  on  all 
systems  with  > 256  colors 

• Web  smart  colors  simply  use  any 
combination  of  00,  I 1 , 22, ...  cc,  dd,  ee,  ff 

• #0055ee 

http://www.morecrayons.com/palettes/webSmart 

http://www.weborum.com/color/wheel.html 


http://www.colourlovers.com/ 


• Picking  a combination  of 
complimentary  colors  is  also 
important  - not  all  colors  look  good 
together 

• This  is  a very  artistic  thing  :) 


Fonts 

Header  One 

• Default  fonts  are  ugly  and  they  have 

Serifs  - which  make  them  harder  to 

Paragraph  about  ugly  default  fonts. 

read  on  a screen 

• So  the  first  thing  1 usually  want  to  do 

Figure  3.5.  Highlighting  the  serifs  of  a serif  font  (Georgia) 

is  override  the  font  in  my  document 

• And  1 want  to  do  this  everywhere. 

® a ©9  0 © 

Fonts 


Most  Favourite  Least  Favourite 

body  { 

font-family:  "Trebuchet  MS",  Helvetica,  Arial,  sans-serif; 
font-size:  x-large; 

} 


Fallback  fonts:  serif,  sans-serif,  monospace,  cursive  and  fantasy. 


Styling  for  Links 

Post-Click: 

Hello  there  my  name  is  Chuck. 
Go  ahead  and  click  on  here. 


Downright  Ugly! 


Font  Factors 


font-size: 

xx-small 

x-small 

font-weight:  bold  or  normal 

small 

medium 

font-style:  normal  or  italic 

large 
x-large 
xx- large 
I4px 

text-decoration:  none,  underline,  overline,  or 
line-through 

a{ 

font-weight:  bold; 
} 

a:  1 i n k { 
color:  black; 

Styling  Links 

} 

a:visited  { 
color:  gray; 

} 

a:hover  { 

text-decoration:  none; 
color:  white; 
background-color:  navy; 

} 

a:active  { 
color:  aqua; 

link  - before  a visit 

visited  - after  it  has  been  visited 

hover  - when  your  mouse  is  over  it 

but  you  have  not  clicked 

active  - you  have  clicked  it  and  you 

have  not  yet  see  the  new  page 

background-color:  navy; 

} 

Browser  default  styling  for  links  is 
downright  ugly! 

CSS  CHEAT  SHEET 


http://www.lesliefranke.com/files/reference/csscheatsheet.html 
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Welcome  to  the  site  dedicated  to  learning  the  Google  Application  Engine.  We 
hope  you  find  www.appenginelearn.com  useful. 


Using  the  Firefox  Web  Developer  Plugin  you  can  see  the 
blocks  which  make  up  your  page. 


Web  Developer  Tools 

• You  pretty  much  need  to  use  Firefox  for  serious  website  development 

• Important  plugins: 

• Web  Developer  - Chris  Pedrick 

• FireBug  - Joe  Hewitt 

http://addons.mozilla.org/ 


«no 

dr-chuck.com 

nJ 

<*'  - - 

^ © http://www.dr-chuck.com/ 

£!▼  ► |G|’ Coogle 

1 

Latest  Headlines.^  Sakai 
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Q Disable  ’ & Cookies  ' 
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Optiorl 

Chuck's  TV  and  Media 
Chuck's  Talks 
Chuck’s  BooFI 
Chuck's  Columns 
Resume  and  Bio 
Blog  (26-Nov  11:44) 
Chuck's  Papers 

UM  School  of  Information 
Sakai  Planet  Blog) 


nrrn  QQ2S  This  site  contains  a bunch  of  stuff  includinq  software,  t 
miscellaneous  material.  This  also  includes  a number  of  activities  arx 
my  good  friend  Richard  Wiggins. 


Teaching 

SI  182  - Building  Applications  for  Information  Environments 
SI  539  - Design  of  Complex  Web  Sites  (Rails) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts 


Outline  Frames 
Outline  Headings 
Outline  Links 
Outline  Tables 

Outline  Block  Level  Elements 

imaEsmssmm 

Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 

f Show  Element  Names  When  Outlining 


Software  Tools 

PHP  image  software  for  v300  and  Treo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 

Other  software  Tools 

Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Ver 


Sakai  and 

uPortal  at  UNISA  - Johan  van 
den  Berg 

Produced:  June  6.  2006  This 
video  was  taped  while  are  the 
Sakai  meeinq  in  Vancouver. 
Johan  discusses  their  upcominq 
project  to  inteqrate  uPortal  and 
Sakai  to  produce  the  UNISA 
campus  portal.  Johan  attended 
both  the  Sakai  and  JA-Siq 
meetinqs  and  descibed  the 
UNISA  approach  to  both 
cmmunities.  Details:  3 minutes, 
Windows  Media  300  kbps. 


Two  kinds  of  elements 

• Inline  - affects  how  text  looks 
• strong,  span 

• Block  - Containers  that  can  be  laid  out 

Navigation  li  { 
display:  inline; 

} 

• Paragraphs,  etc 

• CSS  can  change  a tag  from  inline  to 
block 

Learning  the  Coogle  App  Engine 
<5  file:///Users/csev/Desktop/te£©  -f<V  Google  ^ jg 


AppEng  i 


Learning  the  Coogle  AppEngine 
file:///Users/csev/Desktop/teach  * Coogle 


: jfiL  AppEngii 


Learning  the  Coogle  AppEngine 


C file: ///Users /csev/ Desktop/teach /a  - Qr  Coogle  » 


Google  / : AppEngin 


Learning  the  Coogle  AppEngine 


’ file: ///Use rs/csev/Desktop/teach /app  * 'Q.-  Google  » 

O O Learning  the  Coogle  AppEngine 


AppEngineLearn 


Welcome  to  the  site 
Engine.  We  hope  y 


• file:///Users/csev/Desktop/teach/app  - Q-  Google  y 


Google  A| 

Google  AppEngir  AppEngineLearn  sites  Topics 

Welcome  to  the  site  d 

™™oin9JrBeJ  Welcome  to  the  site  dedicat. 

PP  9 Application  Engine.  We  hop  Gooale  AppEnaine:  About 
www.appengineleam.comu  3 3 


From  Simple  to 
Advanced  CSS 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 


with  no  changes 
to  the  HTML 


Inline  Elements 

• Flowed  with  other  text 

• span,  em,  strong,  cite,  a 

• Inline  tags  can  be  nested  as  long  as  they  match 

• <span  class=,,important,,><cite>Stuff</cite></span> 

• Block  can  contain  inline  - but  inline  cannot  contain  block 


Block  Level  Elements 

• Starts  on  its  own  line  - ends 

<div  id=”content”> 
<p>One  </p> 

justification  and  starts  a new  block 

• Can  be  a container  for  other 

<p>Two</p> 

elements 

• h 1 - h6,  p,  div,  blockquote,  ul,  ol, 
form 

• Blocks  can  contain  other  blocks 

</div> 
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Done 

Think  of  a block  as 
something  to  push  around 

Google  App  Engine:  About 

<p>  Welcome  to  the  site  dedicated  to  learning  the  Google  Application  Engine.  We 
hope  you  find  www.appenginelearn.com  useful. 

the  screen. 
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Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 

Now  we  will  move  things  around,  add  background  and  borders,  etc. 

<body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

</div> 

<div  id="content"> 

<h2>Google  App  Engine: About</h2> 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</div> 

</body> 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 

} 
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Welcome  to  the  site  dedicated  to  learning  the  Google 
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#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 
height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:  right; 

vertical-align:  middle; 

} 

#header h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 

} 


<body> 

<div  id="header"> 

<h  I ><a  href- 'index.htm">> 
<ul> 

<li><a  href- 'sites. htm">Si 
<li><a  href="topics.htm"  : 
</ul> 

</div> 

<div  id="content"> 
<h2>Google  App  Engine:  At 

<p> 

Welcome  to  the  site  dedica 
learning  the  Google  Applica 
We  hope  you  find  www.app 

</p> 

</div> 

</body> 
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Next  we  will  move  these  blocks  around. 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 
height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:  right; 

vertical-align:  middle; 

} 

#header h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 

} 
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#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 
height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:  right; 

vertical-align:  middle; 

} 

#header h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 
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Now  lets  do  some  “tweaking”  to  make  it  more  visually  pleasing... 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 
height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:  right; 

vertical-align:  middle; 

} 

#header  h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 

} 
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CSS  Box  Model 

• height  and  width  properties  size  the  block  element 

• margin  properties  define  the  space  around  the  block  element 

• border  properties  define  the  borders  around  a a block  element 

• padding  properties  define  the  space  between  the  element  border  and  the 
element  content 

• background  properties  allow  you  to  control  the  background  color  of  an 
element,  set  an  image  as  the  background,  repeat  a background  image 
vertically  or  horizontally,  and  position  an  image  on  a page 

http://reference.sitepoint.com/css/boxmodel 


.trapped  { 

height:  lOOpx; 

^ Disable  ▼ Q,  Cookies  T J CSS  ▼ O Forms  ▼ 

^20 

^20 

width:  200px; 

background:red; 
padding:  20px; 
border:  5px  solid  yellow; 
margin:  20px; 
font-family:Arial; 
color:orange; 

1 am  trapped  in  a 
glass  case  of  emotion 
which  is  lOOpx  high 
and  200px  wide. 

1 1 1 1 

9 5 4 0 

0 0 0 0 

font-size:20px; 

Ns 

} 

<p  class=”trapped”> 

1 am  trapped  in  a glass  case  of  emotion  ji  q ■ ■ 

which  is  lOOpx  high  and  200px  wide.  1 UQ  DOX  1 lOClel 

</p> 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 
height:  100%; 
overflow:hidden; 
padding:  7px; 
margin-top:  5px; 

} 

#header  h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 
margin:  0; 

padding:  0 0 0 .3em; 


top,  ri) 


#header  li  { 

font-size:  I4px; 
display:  inline; 
padding:  .5em; 

} 

#header  ul  { 
list-style:  none; 
text-align:  right; 
float:  right; 

vertical-align:  middle; 
margin:  0; 
padding:  0; 

} 


:,  bottom,  left 
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.trapped  { 
height:  50px; 
width:  50px; 

} 

.trapped2  { 
height:  50px; 
width:  50px; 
padding:  lOpx; 
border:  5px  solid  yellow; 

} 

<p  class="trapped"> 

One</p> 

<p  class="trapped2"> 

Two</p> 


Border,  padding,  and  margin  are  additive. 
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App  Engine:  Sites 

Here  are  some  sites  we  hope  you  find  useful: 

• Python  Learn 

• Apo  Engine  Leam 

• Google  App  Engine  Site 


AppEngineLearn 


App  Engine:  Topics 

• Python  Basics 

• Python  Functions 

• Python  Python  Objects 
. Hello  World 

• The  WebApp  Framework 

• Using  Templates 


Sites  Topics 

/ 


Giving  Navigation  Clues... 


<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm"  class="selected">Sites</a></li> 


<li><a  href="topics.htm"  >Topics</a></li> 
</ul> 
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Here  are  some  sites  we  hope  you  find  useful: 


</div> 


#header  li  a.selected  { 
color:  black; 
text-decoration:  none; 

} 


<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 

<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  class- 'selected">Topics</a></li> 
</ul> 


• Pvthon  Leam 

• Add  Engine  Leam 

• Google  Add  Engine  Site 
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• Python  Basics 

• Python  Functions 

• Python  Python  Objects 

• Hello  World 

• The  WebApp  Framework 

• Using  Templates 


</div> 


CSS  Validation 


• You  can  validate  your  CSS  to  make  sure  it  has  no  syntax  errors 

• Browsers  will  generally  quietly  ignore  bad  CSS  syntax 


• http://j  igsaw.  w3  .o  rg/css- val  i dato  r 

• The  validator  can  save  you  time 
and  sanity 


Jump  to:  Validated  CSS 


W3C  CSS  Validator  results  for  file://localhost/TextArea  (CSS  level  2.1) 


This  document  validates  as  CSS  level  2.1  I 

To  show  your  readers  that  you've  taken  the  care  to  create  an  interoperable  Web  page,  you  may  display  this 
icon  on  any  page  that  validates.  Here  is  the  XHTML  you  oould  use  to  add  this  icon  to  your  Web  page: 


Tranforming  the  look  and  feel  of  a page  using  a CSS  style  sheet. 
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• Topics 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 

App  Engine:  Sites 

Here  arc  some  sites  we  hope  you  find  useful: 

• Pvthon  Leam 

• App  Engine  Leam 

• Gooele  Add  Eneine  Site 

body  { 

font-family:  arial,  san-serif; 

} 

a,  a:link 
{ 

color:  #0000cc; 

} 

/6 

U ZEN  GARD E N 

Zen  Garden 

A demonstration  of  what  can  be  accomplished  visually  through 
CSS-based  design.  Select  any  style  sheet  from  the  list  to  load  it  into  this 

• A social  site  where  CSS 
designers  show  their  “stuff” 

• The  HTML  never  changes  - 

an)  a i 

WL 

only  the  CSS 

• Inspiration  for  us  designers 

a 

http://www.csszengarden.com/ 

CSS  Summary 

• CSS  Layout  is  its  own  art  and  science 

• CSS  Basics  are  well  established  and  well  supported  in  all  modern  browsers 

• The  box  model  is  pretty  straightforward  - and  allows  nice  design  within  the 
standards  with  reasonable  effort  levels. 

• Site  layout  and  markup  is  further  evolving  - mostly  to  make  it  increasingly 
possible  to  support  desktop  like  experiences  on  the  web. 

• These  innovations  will  naturally  cause  incompatibilities  - which  make  things 
interesting  and  frustrating  at  times. 


